@charset "UTF-8";
/* 
 * 不能使用 重置样式
 虽说有的标签没有默认的样式，但是要去查找还是需要一些时间的。

 我们在做样式重置的时候，一般要自己定制化的去重置，或者使用第三方成熟的 css reset 库。

 1. 自己定制 body{margin:0;padding:0;} p{margin:0;}

 2. 淘宝 reset 库
  http://www.zhangxinxu.com/wordpress/2015/01/css-reset-for-html5/

  https://blog.csdn.net/baidu_37107022/article/details/71440877?locationNum=4&fps=1


  如果是做移动端页面要做 rem 适配

  面试问题: 在做移动端页面的时候，是如何进行 rem 适配的？
  
  面试问题: 在做移动端页面的时候，是如何进行 多终端（iPhone 5 iPhone 6 iPhone12 安卓 手机的屏幕的尺寸大小不一，设计稿只有一份 一般是基于 iPhone6出的设计稿，一般叫做 二倍稿  750px * 1334px ) 适配的？

*/
/* 导入外部的 reset.scss 文件 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, a, p, textarea {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}

a {
  text-decoration: none;
  display: block;
}

img {
  border: none;
  display: block;
}

/*清除浮动*/
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.clearfloat {
  zoom: 1;
}

/* 封装自己的原子库 */
.fr {
  float: right;
}

.fl {
  float: left;
}

.h10 {
  height: 10px;
}

.fz12 {
  font-size: 12px;
}

.f24 {
  font-size: 24px;
}

.clearfix {
  clear: both;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.main {
  padding: 32px 20px 0;
}

.header {
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 30px;
}

.header h1 {
  width: 100%;
  margin-right: 32px;
  font-size: 1.1rem;
}

.header > div {
  display: flex;
  align-items: center;
  align-self: center;
  position: absolute;
  right: 0;
}

.header > div > span {
  background-color: black;
  border-radius: 50%;
}

.header > div > span:nth-child(2n+1) {
  width: 6px;
  height: 6px;
}

.header > div > span:nth-child(2n) {
  width: 10px;
  height: 10px;
  margin: 0px 5px;
}

.banner {
  width: 100%;
}

.banner img {
  width: 100%;
}

.menu {
  width: 100%;
}

.menu ul {
  display: flex;
  width: 100%;
}

.menu ul li {
  width: 25%;
  padding: 25px 5% 0;
}

.menu ul li a {
  display: inline-block;
  width: 100%;
}

.menu ul li a img {
  width: 100%;
}

.menu ul li a span {
  display: flex;
  justify-content: center;
  color: #2b2b2b;
  font-size: 0.5rem;
  font-weight: 800;
}

.add {
  width: 100%;
  margin: 30px 0;
}

.add img {
  width: 100%;
}

.title {
  width: 100%;
  display: flex;
  margin-bottom: 10px;
}

.title h2 {
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.title h2:nth-child(2) {
  margin-left: 10px;
  color: red;
  letter-spacing: 0;
}

.hot .content {
  display: flex;
}

.hot .content > div img {
  width: 100%;
}

.hot .content > div:nth-child(1) {
  width: 42%;
  margin-right: 5px;
}

.hot .content > div:nth-child(2) {
  width: 59%;
}

.hot .content > div:nth-child(2) img:nth-child(1) {
  margin-bottom: 1px;
}

.guess {
  margin-top: 30PX;
  margin-bottom: 200px;
}

.guess ul {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.guess ul li {
  width: 48%;
  margin: 5px 0;
  border: 1px solid #ebebeb;
}

.guess ul li:nth-of-type(2n+1) {
  margin-right: 8px;
}

.guess ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  height: 160px;
}

.guess ul li a img {
  width: 42%;
}

.guess ul li > p {
  padding: 5px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.guess ul li > p:last-of-type {
  color: red;
}

.footer {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-top: 1px solid #ececec;
  padding: 10px 0;
}

.footer ul {
  display: flex;
}

.footer ul li {
  width: 25%;
}

.footer ul li a {
  display: flex;
  justify-content: center;
}

.footer ul li a img {
  width: 28%;
}

.footer ul li p {
  text-align: center;
}
